import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import './App.css'
import Footer from './components/Footer'

export default class App extends Component {

  //状态在哪里，操作状态的方法就在哪里

  state = {todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:false},
    {id:'003',name:'打游戏',done:false},
    {id:'004',name:'逛街',done:true}
  ]}

  //addTodo用于添加一个todo,接受的参数是todo对象
  addTdo = (todoObj) => {
    const {todos} = this.state
    const newTodos = [todoObj,...todos]
    this.setState({todos:newTodos})
  }

  //用于更新一个todo对象
  updateTodo =(id,done)=>{
    //获取状态中的todos
    const {todos} = this.state
    const newTodos = todos.map((todoObj) => {
      if(todoObj.id === id) 
        return {...todoObj,done:done}
      else
        return todoObj
})
  this.setState({todos:newTodos})
}

  //checkAllTodo用于全选
  checkAllTodo = (flag) => {
    //获取状态中的todos
    const {todos} = this.state
    //遍历，修改状态
    const newTodos = todos.map((todoObj) => {return {...todoObj,done:flag}})
    //更新状态
    this.setState({todos:newTodos})
  }

  
  clearAllDone = () => {
    //获取原来的todos
    const {todos} = this.state
    //过滤数据
    const newTodos = todos.filter((todoObj)=>{
     return !todoObj.done
    })
    //更新状态
    this.setState({todos:newTodos})
   }

  deleteTodo = (id) => {
    //获取状态中的todos
    const {todos} = this.state
    //调用filter方法，返回一个新数组，把所有id值等于参数的id值的todo对象过滤掉
    const newTodos = todos.filter((todoObj) => {return todoObj.id !== id})
    //更新状态
    this.setState({todos:newTodos})
  }

  render() {
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
            <Header addTdo={this.addTdo}/>
            <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
            <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
            <ul className='todo-main'></ul>
            <div className='todo-footer'></div>
        </div>
      </div>
    )
  }
}
